<template>
  <section class="container has-header">
    <nav-bar></nav-bar>
    <mt-field label="书籍标题" placeholder="请填写书籍标题" v-model="bookTitle"></mt-field>
    <mt-field label="书籍作者" placeholder="请填写书籍作者" v-model="bookAuthor"></mt-field>
    <mt-field label="书籍价格" placeholder="请填写书籍价格" v-model="bookPrice"></mt-field>
    <mt-field label="书籍描述" placeholder="请填写书籍描述" v-model="bookDesc" type="textarea" rows="4"></mt-field>
    <mt-button type="default" @click="postAddBook">增加书籍</mt-button>
  </section>
</template>
<script>
import { addBook } from '../utils/api'
import NavBar from '~/components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data () {
    return {
      bookTitle: '',
      bookAuthor: '',
      bookPrice: '',
      bookDesc: ''
    }
  },
  methods: {
    async postAddBook () {
      const options = {
        book_title: this.bookTitle,
        book_author: this.bookAuthor,
        book_price: this.bookPrice,
        book_desc: this.bookDesc
      }
      console.log(options);
      let data = await addBook(options)
      console.log(data);
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

